<template>
  <div ref="charts" class="charts"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'index',
  props:['count'],
  mounted () {
    //初始化charts实例
    let lineCharts = echarts.init(this.$refs.charts)
    lineCharts.setOption({
      //x轴
      xAxis:{
        show:false,//隐藏x轴
        // 最大值与最小值
        max:100,
        min:0
      },
      //y轴
      yAxis:{
        show:false,
        type: 'category',//均分  在y轴横向显示
      },
      //系列
      series:[
        {
          type:'bar',//柱状图
          data:[this.count],
          color:'#00925f',
          //柱状图宽度
          barWidth:10,
          //背景及颜色
          showBackground:true,
          backgroundStyle:{
            color:'#eee',
          },
          // 文本
          label:{
            show:true,
            formatter:'|',//文本内容 默认是数字
            position:'right',
          }
        }
      ],
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0,
      },
    })
  }
}
</script>

<style scoped>
.charts{
  width:100%;
  height:100%;
}
</style>
